<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        height: 100vh;
        padding: 1rem;
        background-color: #f2f2f2;
      }
      section {
        width: 20rem;
        margin: 0 auto;
        padding: 2rem 1rem;
        background-color: #fff;
        color: #333;
        border-radius: 5px;
        box-shadow: 1px 1px 5px rgb(51, 51, 51, 0.5);
      }
      section h3 {
        margin-bottom: 0.5rem;
        text-align: center;
      }
      section form {
        display: grid;
        font-size: 0.9rem;
      }
      section form label {
        margin-bottom: 0.2rem;
      }
      section form input {
        height: 1.5rem;
        margin-bottom: 1rem;
        border: 2px solid #e8e8e8;
        font-size: 0.9rem;
        color: #666;
        border-radius: 2px;
        outline: none;
      }
      section form button {
        padding: 0.2rem;
        border: none;
        background-color: lightblue;
        font-size: 0.9rem;
        color: #fff;
        border-radius: 5px;
      }
      section form button:active {
        background-color: lightpink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <section>
        <h3>添加用户</h3>
        <form id="add">
          <label for="username">用户名: </label>
          <input type="text" name="username" id="username" />
          <label for="password">密码: </label>
          <input type="text" name="password" id="password" />
          <button form="add" type="submit" class="button">添加</button>
        </form>
      </section>
    </div>
    <script type="module">
      import { baseURL, pathname } from './export.js'
      const button = document.querySelector('.button')
      const username = document.querySelector('#username')
      const password = document.querySelector('#password')
      axios.defaults.baseURL = baseURL + pathname
      button.addEventListener('click', function (e) {
        e.preventDefault()
        if (username.value.trim() != '' && password.value.trim() != '') {
          axios
            .post('', {
              username: username.value,
              password: password.value,
            })
            .then(res => {
              if (res.status === 201) location.href = './index.html'
            })
        }
      })
    </script>
  </body>
</html>
